<template>
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>产品信息查询</span>
        </div>
        
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="产品ID">
            <el-input 
              v-model="searchId" 
              placeholder="请输入产品ID"
              clearable
              @keyup.enter.native="handleSearch"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button 
              type="primary" 
              icon="el-icon-search"
              @click="handleSearch"
            >查询</el-button>
          </el-form-item>
        </el-form>
  
        <el-divider content-position="left">产品详细信息</el-divider>
        
        <el-descriptions 
          v-loading="loading"
          class="product-info"
          :column="2" 
          border
        >
          <el-descriptions-item label="产品ID">{{ productInfo.prodId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="产品代码">{{ productInfo.prodCode || '-' }}</el-descriptions-item>
          <el-descriptions-item label="产品名称">{{ productInfo.prodName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="TA代码">{{ productInfo.taCode || '-' }}</el-descriptions-item>
          <el-descriptions-item label="市场代码">{{ productInfo.mktCode || '-' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
  </template>
  
  <script>
  import { getProductById } from '@/api/test/product'
  
  export default {
    name: 'ProductSearch',
    data() {
      return {
        searchId: '',
        productInfo: {},
        loading: false
      }
    },
    methods: {
      handleSearch() {
        if (!this.searchId) {
          this.$message.warning('请输入产品ID')
          return
        }
        
        this.loading = true
        getProductById(this.searchId)
          .then(response => {
            this.productInfo = response.data
            this.$message.success('查询成功')
          })
          .catch(error => {
            console.error(error)
            this.$message.error('查询失败')
          })
          .finally(() => {
            this.loading = false
          })
      }
    }
  }
  </script>
  
  <style scoped>
  .box-card {
    margin: 20px;
  }
  
  .product-info {
    margin-top: 20px;
  }
  
  .el-descriptions-item__label {
    width: 120px;
    font-weight: bold;
  }
  </style>